<template>
    <div class="orderView">
        <el-card class="box-card">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="big">
                <el-form-item label="">
                    <el-input v-model="keyword" placeholder="请输入合同编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="find">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" :row-style="{ height: '40px' }"
                :header-cell-style="{ backgroundColor: '#F0F2F5', lineHeight: '40px' }">
                <el-table-column fixed prop="number" label="订单编号" width="180">

                </el-table-column>
                <el-table-column prop="name" label="客户名称" width="160">
                </el-table-column>
                <el-table-column prop="phone" label="手机号码" width="180">
                </el-table-column>
                <el-table-column prop="creatTime" label="订单时间" width="160">
                </el-table-column>
                <el-table-column prop="carName" label="车辆名称" width="160">
                </el-table-column>
                <el-table-column prop="carColor" label="颜色" width="150">
                </el-table-column>
                <el-table-column prop="price" label="价格" width="160">
                </el-table-column>
                <el-table-column prop="dingPrive" label="定金" width="160">
                </el-table-column>
                <el-table-column prop="souPrice" label="已收款（包含定金）" width="160">
                </el-table-column>
                <el-table-column prop="daiPrice" label="待收款" width="160">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="130">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope, tableData)" type="text" size="small"
                            style="font-size: 14px">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getOrderList } from '../../api/index'

export default {
    name: "orderView",
    data() {
        return {
            currentPage: 1,
            pageSize: 5,//每页显示条数
            total: 0,
            keyword: '',
            formInline: {
                user: '',
                region: ''
            },
            tableData: [

            ],
        }
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        handleClick(row) {
            let ryrzDetails = JSON.stringify(row.row)
            console.log(ryrzDetails);
            this.$router.push({ path: '/orderDetails', query: { res: ryrzDetails } })


        },

        // 查询
        async getList() {
            // 分页参数
            const _query = {
                _page: this.currentPage,
                _limit: this.pageSize
            }
            //搜索参数
            if (!!this.keyword) {
                _query['name_like'] = this.keyword;
            }
            // console.log(this.keyword);
            const _res = await getOrderList(_query);
            // console.log(_res.data);
            this.tableData = _res.data;
            this.total = +_res.headers['x-total-count'];
        },
        // 重置
        async backList() {
            // 分页参数
            const _query = {
                _page: this.currentPage,
                _limit: this.pageSize
            }
            this.keyword = ''
            // console.log(this.keyword);
            const _res = await getOrderList(_query);
            // console.log(_res.data);
            this.tableData = _res.data;
            this.total = +_res.headers['x-total-count'];
        },
        find() {
            this.getList()
        },

        reset() {
            this.backList()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.getList()

            // console.log(val);
        },
        handleCurrentChange() {
            this.getList()
        },
    },
    mounted() {

        this.getList()
    }

}

</script>

<style lang="less" scoped>
.orderView .el-form {
    text-align: left;
    margin-top: 20px;
    height: 100px;
}

.orderView .el-pagination {
    text-align: right;
}
</style>